iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 6
0
Modern Web

實作小範例入門 Vue & Vuex 2.0系列 第 6

vue & vuex 06 - 攝氏轉換華氏工具 - II (v-if, v-show, methods)

  • 分享至 

  • xImage
  •  

今天目標:

  1. 我想要一個按鈕之類的,按下去可以切換轉換攝氏或華氏
  2. 計算結果要立即改成攝氏或華氏
  3. 所有的文字描述要連動修改
  4. 我想要增加一顆按鈕,按下去彈出計算結果。

v-if, v-show, v-on, methods
今天要介紹 4 個 API 延續使用昨天的範例增加功能既可。


vue Directive & vue Option 介紹:

vue directive v-if

這是一個可以增加在 HTML tag 上面的判斷式,如果條件成立的時候,vue 將會幫你繪出元素。

<h2 v-if="isCelsius">攝氏:{{ celsius }} °C</h2>
<h2 v-if="!isCelsius">華氏:{{ fahrenheit }} °F</h2>

isCelsius = true 的時候 vue 將會幫你繪出在瀏覽器上。

結果:攝氏: °C


vue directive v-show

這是一個可以增加在 HTML tag 上面的判斷式,如果條件成立的時候,vue 將會幫你顯示元素。

<span v-show="!isCelsius">攝氏:</span>
<span v-show="isCelsius">華氏:</span>

isCelsius = true 的時候 vue 將會幫你顯示在畫面上。

結果:華氏:

再 HTML 上面可以觀察到,成立條件的 DOM 被使用 display 隱藏了。

<div style="display: none;">

到這邊可能會有一個疑問,到底 v-if 與 v-show 有什麼不同呢?

  • v-if: 當條件成立時,會在瀏覽器上繪製此元素。
  • v-show: 當條件成立時,會使用隱藏的方式,不顯示元素。

比較圖:

vue directive 條件不成立時
v-if 不繪製此 DOM
v-show 依然存在 DMO 中

何時 if 何時 show ?

存不存再 DOM 將會對效能比較有直接關係,如果使用 v-show tag 上所綁定的 model 都會雙向的數值計算,雖然畫面上看不到,可是依然在瀏覽器上面改變畫面。

或者使用了 v-if 而此功能會頻繁的做切換,將會在瀏覽器上進行快速插入/刪除 DOM 的動作。

所以如果是包含著一個大區塊的判斷式會比較建議使用 v-if 而小型區、頻繁切換的條件或只是文字/ 顏色切換,可以使用 v-show 既可。


vue directive v-on

是 vue 包裝過的事件處理,舉凡最簡單的:

onclick="dosomething();"

也要改成:

v-on:click="dosomething"

當然這樣寫有點囉唆,因此有另一種寫法方便我們開發:

@click="dosomething"

vue option methods

是 vue 建構子當中存放 function 的地方,如 onclick 按下後執行的函式可以放在這個區域。

methods: {
  temperatureConversio ( val ) {
    if ( this.isCelsius ) {
      alert('攝氏: ' + this.celsius );
    } 
    else {
      alert('華氏: ' + this.fahrenheit );
    }
  }
}

完整實作範例:

<template>
  <div class="container">
    <h1>Temperature Conversion</h1>
    <!-- 切換模式按鈕 -->
    <input id="toggleTemperature" type="checkbox" v-model="isCelsius">
    <label for="toggleTemperature">切換:{{ toggleTemperature }}</label>
    
    <!-- 轉換顯示區域 -->
    <!-- v-if 條件不成立的區域,不會存在瀏覽器上 -->
    <h2 v-if="isCelsius">攝氏:{{ celsius }} °C</h2>
    <h2 v-if="!isCelsius">華氏:{{ fahrenheit }} °F</h2>
    
    <!-- 使用者輸入區域 -->
    <!-- v-show 條件不成立的區域會使用 style 隱藏,會存在瀏覽器上 -->
    <div class="celsius">
      <span v-show="!isCelsius">攝氏:</span>
      <span v-show="isCelsius">華氏:</span>
      <input type='number' v-model="userInput" /> °C
    </div>

    <!-- alert 顯示計算結果 -->
    <button @click="temperatureConversio( userInput );">
      Temperature Conversio
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userInput: 0,
	  // 增加此變數紀錄目前是什麼模式。
      isCelsius: false,
    }
  },
  computed: {
    fahrenheit () {
      return this.userInput * 9/5 + 32;
    },
    celsius () {
      return (this.userInput - 32) * 5/9;
    },
    toggleTemperature () {
      return this.isCelsius ? "攝氏 轉換 華氏" : "華氏 轉換 攝氏";
    }
  },
  methods: {
    temperatureConversio ( val ) {
	  // val 是從 click 傳進來的 userInput 這是示範 function 傳值。
	  // 如果不傳值,直接使用 this.userInput 也可以。
	  // alert 的內容直接使用 computed 已經幫我計算好的結果。
      if ( this.isCelsius ) {
        alert('攝氏: ' + this.celsius );
      } 
      else {
        alert('華氏: ' + this.fahrenheit );
      }
    }
  }
}
</script>

<style>
  .userInput {
    font-size: 30px;
  }
</style>

javascript 中取得 data 或呼叫 methods ?

在 javascript 中如果 methods 需要拿 userInput 的 value 必須加上 this

this 指向這個 vue 元件本身。

methods: {
  temperatureConversio ( val ) {
    // 取得 data 資料
    alert( userInput ); // 錯誤
    alert( this.userInput ); // 正確
    
    // 呼叫其他 method
    someMethod();// 錯誤
    this.someMethod(); //正確
  },
  someMethod () {
      alert('call some method OK!');
  }
}

http://ithelp.ithome.com.tw/upload/images/20161215/20103326wG2NZ0Ewaq.png


github 完整範例:

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。


上一篇
vue & vuex 05 - 攝氏轉換華氏工具 - I (computed)
下一篇
vue & vuex 07 - component - I (元件拆解,合併,靜態資料引用)
系列文
實作小範例入門 Vue & Vuex 2.030
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言